/*@import "./awesome-font/font-awesome"*/
@import "loader"

* {
	margin: 0;
	padding: 0;
	box-sizing:border-box;
	user-select: none;
}

html, body {
	font-family: "Helvetica Neue","Helvetica","STHeiTi","sans-serif","Microsoft YaHei", "\5fae\8f6f\96c5\9ed1";
	width: 100%;
	height: 100%;
}

html {
	background-color: #000; 
}

ul {
	list-style: none;
}

a {
	text-decoration: none;
	color: inherit;
	&:visited {
		color: inherit;
	}
}

$blue: #39c4e6;

.dot {
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 20px;
	background-color: red;
	text-align: center;
	font-size: 12px;
	line-height: 20px;
	color: #FFF;
	margin-left: 5px;
	margin-right: -20px;
	/*margin-top: -3px;*/
}

#app {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
}

.page {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background-color: #000;
	/*overflow: hidden;*/

	.page-body {
		height: 100%;
		background-color: #FFF;
		overflow: scroll;
	}

}

.mask {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background-color: rgba(0, 0, 0, .3);
	/*pointer-events: none;*/
}

.feed-list {
	padding-top: 40px;
}

/*话题高亮*/
.topic {
	color: $blue;
	margin-right: 5px;
	background-color: #444444;
}

.feed-wrapper {
	position: relative;
	margin-bottom: 5px;

	img {
		display: block;
		width: 100%;
	}

	.repost {
		width: 30%;
		position: absolute;
		right: 10px;
		bottom: -5px;
	}

	.image-wrapper {
		position: relative;
	}

	.user-info {
		padding: 8px 10px;
		background-color: #252120;
		overflow: hidden;
		.avatar {
			width: 30px;
			height: 30px;
			border-radius: 50px;
			float: left;
		}

		span {
			margin-left: 10px;
		}

		.name {
			line-height: 30px;
			font-size: 14px;
			color: rgba(255, 255, 255, .9);
			margin-left: 5px;
		}

		.time {
			font-size: 12px;
			color: rgba(255, 255, 255, .2);
			margin-left: 5px;
		}
	}

	.feed-info {
		padding: 10px;
		background-color: #252120;
		.text {
			font-size: 13px;
			color: rgba(255, 255, 255, .9);
		}

		.location {
			margin: 5px 0;
			font-size: 10px;
			color: rgba(255, 255, 255, .5);
		}

		.feed-extras {
			span {
				color: #FFF;
				font-size: 13px;
				line-height: 14px;
			}

			i {
				padding-right: 5px;
			}

			.icon-heart {
				color: #FF2626;
			}

			.comment {
				float: right;
			}
		}
	}
}

.comments-box {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 2;
	.close {
	    position: absolute;
	    font-size: 36px;
	    left: 10px;
	    z-index: 10;
	    color: #FFF;
	    width: 50px;
	    height: 50px;
	}
	.bg {
		position: absolute;
		top: 0; left: 0; right: 0; bottom: 0;
		-webkit-filter: blur(12px) brightness(.3);
		transform: scale(1.1);
		background-size: cover;
		background-position: center top;
		background-repeat: no-repeat;
	}
	.comment-list {
		position: absolute;
		top: 0; left: 0; right: 0; bottom: 50px;
		padding-top: 35px;
		overflow: scroll;
		.comment-wrapper {
			position: relative;
			display: block;
			overflow: hidden;
			.avatar {
				border-radius: 50px;
			    position: absolute;
			    left: 10px;
			    bottom: 10px;
			    width: 30px;
			    height: 30px;
			    overflow: hidden;
			}
			.name {
				position: absolute;
				left: 55px;
				top: 12px;
				color: rgba(255,255,255,.7);
				font-size: 12px;
			}

			.time {
				text-align: center;
				font-size: 12px;
				color: rgba(255,255,255,.7);
			}

			&.mine {
				.comment {
					margin: 10px 50px 10px;
					background-color: rgba(106, 122, 218, 0.21);
					float: right;
				}
				.avatar {
					left: auto;
					right: 10px;
				}
				.name {
					visibility: hidden;
				}
			}

			&.topic-owner {
				.avatar {
					border: 1px solid #2398D4;
				}
			}

			.comment {
				float: left;
				background-color: #9A9A9A;
				margin: 16px 50px 10px;
				padding: 8px;
				font-size: 13px;
				border-radius: 6px;
				color: rgba(255, 255, 255, 0.9);
			}
		}
	}
	.comment-input {
		position: absolute;
		left: 0; right: 0; bottom: 0px;
		min-height: 50px;
		background-color: rgba(255, 255, 255, .85);
		overflow: hidden;
		padding: 10px 50px 0;
		.avatar {
			position: absolute;
			left: 10px;
			bottom: 10px;
			width: 30px;
			height: 30px;
			border-radius: 50px;
		}
		textarea {
			border: 0;
			outline: transparent;
			width: 100%;
			background-color: transparent;
			padding-top: 5px;
			resize: none;
		}
	}
}

.commentsPop-transition {
  transition: transform .2s linear;
  transform: translateY(0);
}
.commentsPop-enter, .commentsPop-leave {
  transform: translateY(100%);
}

.fade-transition {
  transition: opacity .25s;
  opacity: 1;
}
.fade-enter, .fade-leave {
  opacity: 0;
}

.mine-head {
	position: fixed;
	padding: 5px 10px;
	overflow: hidden;
	height: 40px;
	width: 100%;
	background-color: rgba(0, 0, 0, .8);
	img {
		position: absolute;
		display: inline-block;
		top: 5px;
		left: 10px;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		overflow: hidden;
	}
	.title {
		text-align: center;
		color: #FFF;
		width: 100%;
		display: inline-block;
		padding: 0 30px;
		line-height: 30px;
	}
}

.bottom-menu {
	position: fixed;
	left: 0; right: 0;
	bottom: 20px;
	height: 50px;
	.op-icon {
		position: absolute;
		border-radius: 50%;
	}
	.op-camera {
		background-color: #FFF;
		color: #302826;
		left: 50%;
		margin-left: -25px;
		width: 50px;
		height: 50px;
		text-align: center;
		font-size: 25px;
		line-height: 50px;
	}
}

.nav-bar {
	position: relative;
	width: 100%;
	height: 40px;
	left: 0; right: 0; top: 0;
	color: #FFF;
	font-size: 15px;
	background-color: #000;
	z-index: 5;

	&.fixed {
		position: fixed;
		&+div {
			margin-top: 40px;
		}
	}

	a {
		position: absolute;
		text-align: center;
		line-height: 40px;
		top: 0;
	}
	a:nth-of-type(1) {
		width: 70px;
		height: 40px;
		left: 0; top: 0; bottom: 0;
	}

	a.back {
		font-size: 30px;
		font-weight: normal;
	}

	a:nth-of-type(2) {
		width: 70px;
		height: 40px;
		right: 0; top: 0; bottom: 0;
	}

	p {
		padding:0 70px;
		line-height: 40px;
		text-align: center;
	}
}

.post-box {
	position: relative;
	background-color: #FFF;
	padding: 15px 10px;
	
	.pic {
		position: absolute;
		top: 15px; left: 10px;
		width: 110px;
		height: 110px;
		background-color: #dfdfdf;
		overflow: hidden;

		&.uploaded {
			&:after {
				display: none;
			}
		}

		&:after {
			position: absolute;
			top: 0; left: 0; right: 0;
			line-height: 110px;
			text-align: center;
			font-size: 13px;
			color: #FFF;
			content: "点击上传图片";
		}

		img {
			width: 100%;
		}
		input {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0; top: 0;
			opacity: 0;
			z-index: 10;
		}
	}

	.content {
		margin-left: 120px;
		textarea { 
			width: 100%;
			height: 150px;
			border: none;
			resize: none;
			outline: transparent;
			font-size: 14px;
		}
	}

	.count {
		position: absolute;
		right: 5px;
		bottom: 5px;
		border-radius: 10px;
		background-color: #F7F7F7;
		font-size: 12px;
		color: #4a4a4a;
		padding: 3px;
	}
}

/*消息模块*/
.message-list {
	padding: 0 10px;
	li {
		position: relative;
		min-height: 90px;
		border-bottom: 1px solid #d8d8d8;
		padding: 10px 0 10px;
	}
	.avatar {
		width: 45px;
		height: 45px;
		border-radius: 100px;
		overflow: hidden;
		float: left;
	}
	.content {
		margin-left: 60px;
		margin-right: 75px;
	}
	p {
		font-size: 14px;
	}
	span:first-of-type {
		color: #1ed1cd;
		margin-right: 5px;
	}

	.meta {
		color: #6d6d6d;
		font-size: 13px;
	}

	.thumbnail {
		position: absolute;
		top: 10px;
		right: 0;
		width: 70px;
		height: 70px;
		overflow: hidden;
		img {
			width: 100%;
		}
	}
}

